<template>
  <div class="container">
    <Category type="美食分类">
      <template scope="{foods}">
        <ul>
          <li v-for="(f, index) in foods" :key="index">{{f}}</li>
        </ul>
      </template>
    </Category>

    <Category type="美食分类">
      <template scope="{foods, msg}">
        <ol>
          <li style="color:red" v-for="(f, index) in foods" :key="index">{{f}}</li>
        </ol>
        <h2>{{msg}}</h2>
      </template>
    </Category>

    <Category type="美食分类">
      <template slot-scope="{foods}">
        <h4 style="text-align:center" v-for="(f, index) in foods" :key="index">{{f}}</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'App',
  components: { Category }
}
</script>

<style scoped>
.container, .foot {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
a {
  text-align: center;
}
</style>
